<style lang="scss" scoped>
.content{
  padding-top:60px;
  height: 100%;
  overflow: hidden;
  .firstBanner{
      background: url("../../assets/images/banner.jpg") no-repeat;
      background-size: cover;
  }
  .secondBanner{
      background: url("../../assets/images/banner2.jpg") no-repeat;
      background-size: cover;
  }
  .thirdBanner{
      background: #012377;
      img{
        max-height: 100%;
      }
  }
  ::v-deep {
    .el-carousel{
      height: 100%!important;
    }
    .el-carousel__container{
      width:100%;
      height: 100%!important;
    }
  }
  .test{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper{
      width: 100%;
      height: calc(100% - 440px);
      text-align: center;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      // img{
        // position: absolute;
        // max-height: 100%;
        // top:55%;
        // left: 50%;
        // transform: translate(-50%,-50%)
      // }
    }
  .section{
    height:370px;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    font-size: 12px;
    .info{
      .left{
        float: left;
        background: #fff;
        margin:20px 0  0 20px;
        height:330px;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 2px;
        width: calc(100% - 535px);
        overflow: auto;
        .title{
          overflow: hidden;
          .t,.airing{
            float: left;
          }
          .airing{
            .font-icon{
              background: url('../../assets/img/xiaoxi.png') no-repeat;
              background-size:12px;
              display: inline-block;
              vertical-align:sub;
              width: 12px;
              height: 12px;
            }
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 20px;
            background: #FAFAFA;
            border: 1px solid #E8E8E8;
            max-width: 300px;
            line-height: 20px;
            margin-left: 10px;
            padding: 0 10px;
            color: #212122;
            font-size: 12px;
            span{
              color: #448EF7;
            }
          }
          .btn{
            font-size: 14px;
            border-radius: 20px;
            padding: 0 20px;
            float: right;
          }
        }
        .lists{
          // padding-top:10px;
          height: calc(100% - 45px);
          overflow: auto;
          .list{
            overflow: hidden;
            height:46px;
            line-height: 46px;
            .btn{
              border-radius: 10px;
              padding: 0 10px;
              font-size: 12px;
              float: left;
              position: relative;
              top:12px;
            }
            .lv{
              background: #38CBB7;
            }
            .text{
                padding-left: 4px;
                color: #666665;
                max-width: 65%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                float: left;
            }
            .looks{
              float: right;
              .btn{
                float: left;
                position: relative;
                top:12px;
                cursor: pointer;
                height:20px;
                line-height: 20px;
              }
              .btn1{
                background: #EFF6FF;
                border: 1px solid #458EF6;
                border-radius: 18px;
                color: #458EF6;
                margin-right: 10px;
                // width: 50px;
                text-align: center;
                height: 22px;
                line-height: 22px;
              }
              .btn2{
                background: #FFFFFF;
                border: 1px solid #DADADA;
                border-radius: 18px;
                color: #B9B9B9;
                width: 50px;
                text-align: center;
                height: 22px;
                line-height: 22px;
              }
            }
          }
        }
      }
      .right{
        width: 510px;
        float: right;
        padding-top:16px;
        .list{
          float: right;
          width: 236px;
          height:160px;
          margin-bottom:16px;
          margin-right:14px;
          img{
            cursor: pointer;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="content">
    <bxHeader @date="date" />
    <div class="swiper">
      <el-carousel :interval="1000" indicator-position="none" arrow="never" @change="bannerChange">
        <el-carousel-item v-for="(img, index) in imgList" :key="index" class="test" :class="className(index)">
          <img :src="img.url" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="section">
      <div class="info">
        <div class="left">
          <div class="title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我的待办" name="todoList" />
              <el-tab-pane label="我的已办" name="haveToDoList" />
            </el-tabs>
            <!-- <p class="h2 t">我的待办</p> -->
            <!-- <p class="airing">
              <i class="font-icon" />
              全部待办36条，已处理10条，未处理
              <span>26</span>
              条
            </p> -->
            <!-- <p class="m_primary btn">全部已阅</p> -->
          </div>
          <div class="lists">
            <ul v-loading="loading">
              <li v-for="(item,index) in todoList" :key="index" class="list">
                <p v-if="item.myself==='1'" class="btn m_primary">我的</p>
                <p v-if="item.myself==='0'" class="btn m_primary lv">下属</p>
                <p v-show="item.createTime" class="text">【{{ item.createTime }}】{{ item.message }}</p>
                <p v-show="!item.createTime" class="text">{{ item.message }}</p>
                <div class="looks">
                  <p v-if="show(item,['-3','-2'])" class="btn btn1" @click="goFallIn(item)">前往填写</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'todoList'" class="btn btn1" @click="goFallIn(item)">查看</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'haveToDoList'" class="btn btn1" @click="goHaveToDo(item)">查看</p>
                  <p v-if="show(item,['2','5'])" class="btn btn2" @click="readTask(item)">已阅</p>
                </div>
              </li>
            </ul>
          </div>

        </div>
        <div class="right">
          <ul>
            <!-- '/compile' -->
            <li class="list" @click="router_go('MT10000')">
              <img src="../../assets/img/01.png">
            </li>
            <!-- '/management' -->
            <li class="list" @click="router_go('MT20000')">
              <img src="../../assets/img/index_2.png">
            </li>
            <li class="list" @click="router_go('MT30000')">
              <img src="../../assets/img/02.png">
            </li>
            <li class="list" @click="router_go('MT40000')">
              <img src="../../assets/img/03.png">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <bxFooter />
  </div>
</template>
<script>
import bxHeader from '@/components/headerFooter/header'
import bxFooter from '@/components/headerFooter/footer'
export default {
  components: {
    bxFooter,
    bxHeader
  },
  data() {
    return {
      navBarList: [],
      todoList: [],
      activeName: 'todoList',
      year: '',
      whichBanner: 0,
      loading: false,
      imgList: [
        {
          url: require('../../assets/images/logo1.png')
        },
        {
          url: require('../../assets/images/logo2.png')
        }
      ]
    }
  },
  computed: {
    className() {
      return function(index) {
        const classObj = {
          0: 'firstBanner',
          1: 'secondBanner',
          2: 'thirdBanner'
        }
        return classObj[index]
      }
    }
  },
  mounted() {
    // this.init()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'todoList') {
        this.todo()
      }
      if (tab.name === 'haveToDoList') {
        this.haveToDo()
      }
    },
    // banner
    bannerChange(index) {
      this.whichBanner = index
    },
    // 年份
    date(val) {
      console.log(val, '4567890')
      this.year = val
      this.init(val)
    },
    show(item, arr) {
      // console.log(arr.indexOf(item.taskType) !== -1)
      return arr.indexOf(item.taskType) !== -1
    },
    init(val) {
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01001',
        'methodName': 'getNavForUser'
      }).then((res) => {
        // console.log(res)
        if (res.isSuccess === true) {
          res.data.navBarList.map((item, index) => {
            this.navBarList.push(item.menuEname)
          })
        }
      })
      this.todo(val)
    },
    todo(val) {
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'methodName': 'getAllTask',
        'reportYear': val || this.year,
        'serviceName': 'MT01108'
      }).then((res) => {
        // console.log(res)
        if (res.isSuccess === true) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    haveToDo(val) { // 初始化已办list
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'methodName': 'getReadApproveTask',
        'serviceName': 'MT01108',
        'reportYear': val || this.year
      }).then((res) => {
        if (res.isSuccess) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    router_go(val) {
      // console.log(val)
      const result = this.navBarList.find(v => v === val)
      if (result) {
        console.log(result)
        if (val === 'MT10000') {
          this.$router.push({
            path: '/compile',
            query: {
              menuEname: val
            }
          })
        } else if (val === 'MT20000') {
          this.$router.push({
            path: '/management',
            query: {
              menuEname: val
            }
          })
        }
      } else if (val === 'MT20000') {
        this.$message('当前暂无需要向您汇报“一人一表”工作的下属')
      } else if (val === 'MT10000') {
        this.$message('您暂不需要进行“一人一表”填写')
      } else {
        this.$message({
          type: 'info',
          message: '当前功能暂未开放'
        })
      }
    },
    // 前往填写
    goFallIn(item) {
      if (['2', '3', '5', '6'].includes(item.taskType)) {
        this.$router.push({
          path: '/subordinates', // 领导审核之后的页面
          query: {
            opinion: '1',
            reportHistoryId: item.reportHistoryId
          }
        })
        return
      }
      if (['-2'].includes(item.taskType)) {
        const linshi = this.$store.state.tab.tabArr
        item.dealWay = 2
        const isHas = linshi.some((it) => {
          return it.empCode === item.empCode
        }) && false
        if (!isHas) {
          this.$store.commit('tab/ADD_TABARR', item)
          this.$store.commit('tabClick/click', linshi.length - 1)
        }
        this.$router.push({
          path: '/mainTask',
          query: {
            edit: '1'
          }
        })
        return
      }
      if (['1', '4'].includes(item.taskType)) {
        const linshi = this.$store.state.tab.tabArr
        item.dealWay = 0
        const isHas = linshi.some((it) => {
          return it.empCode === item.empCode
        }) && false
        if (!isHas) {
          this.$store.commit('tab/ADD_TABARR', item)
          this.$store.commit('tabClick/click', linshi.length - 1)
        }
        this.$router.push({
          path: '/reviewIndex',
          query: {
            reportHistoryId: item.reportHistoryId,
            empCode: item.empCode,
            edit: '1'
          }
        })
        return
      }
      // if (['1', '4'].includes(item.taskType)) {
      //   this.$router.push({
      //     path: '/reviewIndex',
      //     query: {
      //       reportHistoryId: item.reportHistoryId,
      //       empCode: item.empCode,
      //       edit: '1'
      //     }
      //   })
      //   return
      // }
    },
    goHaveToDo(item) { // 已办查看按钮
      if (['1', '2', '3', '4', '5', '6'].includes(item.taskType)) {
        this.$router.push({
          path: '/subordinates', // 领导审核之后的页面
          query: {
            reportHistoryId: item.reportHistoryId,
            opinion: '1'
          }
        })
        return
      }
      if (['7', '8'].includes(item.taskType)) {
        this.$router.push({
          path: '/auditSeeQuarter', // 领导点评之后的页面
          query: {
            reportId: item.reportId,
            quarterNumber: item.quarterNumber,
            option: '1'
          }
        })
        return
      }
    },
    readTask(item) {
      this.$http.post('/serviceAction/common', {
        'methodName': 'readTask',
        'taskIdList': [item.taskId],
        'serviceName': 'MT01108'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          this.init()
        }
      })
    }
    // 前往填写
    // goFallIn() {
    //   this.$router.push({
    //     path: '/mainTask',
    //     query: {
    //       edit: '1'
    //     }
    //   })
    // }
  }
}
</script>
